<template>
	<view class="container">
		<mescroll-body bottom="100rpx" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
			<view class="album-cover" :style="{ backgroundImage: `url(${photoData.length > 0 ? photoData[0].file.file_path : `${staticFileDomain}/static/image/album-cover.png`})` }">
				<!--  -->
				<view class="album-cover-content">
					<view class="album-cover-title">默认相册</view>
					<view class="album-cover-sub">
						<view class="album-cover-resume">
							<view class="album-cover-resume-item">共 {{ photoTotal }} 张照片</view>
							<view class="album-cover-resume-item">公开</view>
						</view>
					</view>
				</view>
			</view>
			<view class="album-choice">
				<u-upload name="iFile" @on-list-change="onListChange" @on-change="onChange" @on-progress="onProgress" @on-remove="onRemove" @on-uploaded="onUploaded" @on-success="onSuccess" ref="uUpload" :header="uploadHeader" :show-upload-list="false" :action="action" :custom-btn="true">
					<view slot="addBtn" class="album-choice-btn">上传照片</view>
				</u-upload>
			</view>
			<view class="album-main">
				<block v-if="fileList.length > 0">
					<view class="album-main-title"><view class="album-main-title-text">最新</view></view>
					<view class="album-main-group">
						<view class="album-main-image" v-for="(item, index) in fileList" :key="index">
							<u-image width="100%" height="100%" :src="item.url"></u-image>
							<view class="album-image-progress-content">
								<view class="album-image-progress-info">上传中</view>
								<view class="album-image-progress-number">{{ item.progress }} %</view>
							</view>
						</view>
					</view>
				</block>
				<block v-for="(group, gIndex) in photoGroupList" :key="gIndex">
					<view class="album-main-title">
						<view class="album-main-title-text">{{ group.date }}</view>
					</view>
					<view class="album-main-group">
						<view class="album-main-image" v-for="(item, tIndex) in group.list" :key="item.file_id"><u-image @click="previewImage(gIndex, tIndex)" width="100%" height="100%" :src="item.file.file_path"></u-image></view>
					</view>
				</block>
			</view>
		</mescroll-body>
		<view class="album-footer" @tap.stop="toPage" data-url="/pageUser/album/operation"><u-icon label="批量操作" label-size="26" name="edit-pen" size="32" margin-left="20"></u-icon></view>
	</view>
</template>

<script>
import Url from '@/common/http/url.js';
import moment from '@/utils/Moment.js';
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
export default {
	mixins: [MescrollMixin], // 使用mixin
	data() {
		return {
			upOption: {
				textNoMore: '-- 没有更多照片了 --',
				toTop: {
					src: ''
				},
				page: {
					size: 30
				}
			},
			action: Url.UPLOAD_IMAGE,
			fileList: [],
			photoData: [],
			photoTotal: 0
		};
	},
	onReady() {},
	onLoad() {
		uni.setNavigationBarTitle({
			title: '默认相册'
		});
	},
	onShow() {
		// this.uploadHeader = {
		// 	Authorization: this.userToken
		// };
	},
	watch: {
		fileList: {
			handler(newValue, oldValue) {
				if (newValue && newValue) {
					if (oldValue.length > 0 && newValue.length == 0) {
						setTimeout(() => {
							this.mescroll.resetUpScroll(false);
						}, 100);
					}
				}
			}
		}
	},
	computed: {
		uploadHeader: function() {
			return {
				Authorization: this.userToken
			};
		},
		photoGroupList: function() {
			const year = moment().year();
			let obj = {};
			this.photoData.forEach((item, index) => {
				let { date } = item;
				let dateStr = '';
				const dateMoment = moment(date, 'YYYY-MM-DD');
				if (year == dateMoment.year()) {
					dateStr = dateMoment.format('MM月DD日');
				} else {
					dateStr = dateMoment.format('YYYY年MM年');
				}
				if (!obj[dateStr]) {
					obj[dateStr] = {
						date: dateStr,
						list: []
					};
				}
				obj[dateStr].list.push(item);
			});
			return Object.values(obj); // 最终输出
		}
	},
	methods: {
		upCallback(mescroll) {
			this.$u.api
				.getAlbumPhoto(mescroll.num)
				.then(res => {
					if (res.code == 200) {
						const data = res.data.list;
						const list = data.data;
						list.map(item => {
							const date = item.create_time.split(' ')[0];
							item.date = date;
							return item;
						});
						if (mescroll.num == 1) {
							this.photoData = list;
						} else {
							this.photoData.push(...list);
						}
						this.photoTotal = data.total;
						this.mescroll.endBySize(list.length, data.total);
					} else {
						this.mescroll.endErr();
					}
				})
				.catch(e => {
					this.mescroll.endErr();
				});
		},
		onRemove(index, lists) {
			this.fileList = lists;
		},
		onSuccess(data, index, lists) {
			if (data.code == 200) {
				const { file_id, file_path } = data.data;
				this.addAblumPhoto(file_id, file_path, index);
			}
		},
		onUploaded() {
			this.$refs.uUpload.clear();
			// this.mescroll.resetUpScroll(false);
		},
		onProgress(res, index, lists) {
			this.fileList = lists;
		},
		onChange(res, index, lists) {
			this.fileList = lists;
		},
		onListChange(lists) {
			this.fileList = lists;
		},
		addAblumPhoto(file_id, file_path, index) {
			this.$u.api.addAlbumPhoto(file_id, file_path, index).then(res => {
				this.photoData.unshift({
					file_id,
					date: moment().format('YYYY-MM-DD'),
					create_time: moment().format('YYYY-MM-DD HH:mm:ss'),
					file: {
						file_id,
						file_path
					}
				});
				this.photoTotal = this.photoTotal + 1;
			});
		},
		previewImage(gIndex, tIndex) {
			uni.previewImage({
				urls: [this.photoGroupList[gIndex].list[tIndex].file.file_path],
				loop: false,
				indicator: 'none'
			});
		}
		// choosePhoto() {
		// 	uni.chooseImage({
		// 		success: res => {
		// 			let fileUrlList = [];
		// 			let fileList = [];
		// 			this.fileList.map(item => {
		// 				if (item.url) {
		// 					fileUrlList.push(item.url);
		// 				}
		// 			});
		// 			fileUrlList.push(...res.tempFilePaths);
		// 			fileUrlList = [...new Set(fileUrlList)];
		// 			fileUrlList.map(item => {
		// 				fileList.push({
		// 					url: item,
		// 					progress: 0
		// 				});
		// 			});
		// 			this.fileList = fileList;
		// 		}
		// 	});
		// }
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.album-cover {
	/* #ifdef MP */
	height: calc(268rpx + var(--status-bar-height));
	/* #endif */
	/* #ifndef MP */
	height: calc(268rpx + 44px + var(--status-bar-height));
	/* #endif */
	background-position: bottom center;
	position: relative;
	background-size: cover;
	.album-cover-content {
		width: 100%;
		height: 100%;
		/* #ifdef MP */
		padding: calc(var(--status-bar-height)) 32rpx 20rpx 32rpx;
		/* #endif */
		/* #ifndef MP */
		padding: calc(44px + var(--status-bar-height)) 32rpx 20rpx 32rpx;
		/* #endif */
		background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		color: #fff;
		.album-cover-title {
			height: 80rpx;
			font-size: 46rpx;
		}
		.album-cover-sub {
			height: 50rpx;
			font-size: 25rpx;
			display: flex;
			justify-content: space-between;
			.album-cover-resume {
				display: flex;
				align-items: center;
				.album-cover-resume-item {
					margin-left: 30rpx;
					&:nth-child(1) {
						margin-left: 0;
					}
				}
			}
		}
	}
}
.album-choice {
	height: 168rpx;
	padding: 40rpx 70rpx;
	position: relative;
	.album-choice-btn {
		height: 88rpx;
		width: 610rpx;
		background-color: $theme-main-color;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 44rpx;
	}
}
.album-main {
	.album-main-title {
		height: 40rpx;
		font-size: 32rpx;
		width: 100%;
		padding: 0 30rpx;
		.album-main-title-text {
			align-items: center;
			justify-content: center;
			display: flex;
			color: #333333;
		}
	}
	.album-main-group {
		padding: 25rpx 0;
		display: flex;
		flex-wrap: wrap;
		.album-main-image {
			height: 248rpx;
			width: 248rpx;
			margin-bottom: 3rpx;
			margin-left: 3rpx;
			position: relative;
			&:nth-child(3n + 1) {
				margin-left: 0;
			}
			.album-image-progress-content {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				color: #333;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				.album-image-progress-info {
					margin-bottom: 2rpx;
					font-size: 28rpx;
				}
				.album-image-progress-number {
					font-size: 24rpx;
				}
			}
		}
	}
}
.album-footer {
	position: relative;
	height: 100rpx;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	&::before {
		content: '';
		position: absolute;
		top: 0;
		height: 1rpx;
		left: 0;
		right: 0;
		background-color: #e5e5e5;
	}
}
</style>
